<template>
  <view class="order-detail-page">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="nav-left" @click="goBack">
        <text class="back-icon">‹</text>
      </view>
      <view class="nav-title">待使用订单</view>
      <view class="nav-right"></view>
    </view>

    <view class="content">
      <!-- 核销码 -->
      <view class="verification-card">
        <view class="verification-title">核销码</view>
        <view class="verification-code">{{ verificationCode }}</view>
        <view class="verification-tip">请向店员出示此核销码</view>
      </view>

      <!-- 订单信息 -->
      <view class="info-card">
        <view class="info-header">
          <text class="status-text">待使用</text>
          <text class="order-no">订单号：{{ orderInfo.orderNo }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">服务项目：</text>
          <text class="value">{{ orderInfo.service }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">服务门店：</text>
          <text class="value">{{ orderInfo.shop }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">下单时间：</text>
          <text class="value">{{ orderInfo.orderTime }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">预约时间：</text>
          <text class="value">{{ orderInfo.appointmentTime }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">车辆：</text>
          <text class="value">{{ orderInfo.carInfo }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">备注：</text>
          <text class="value">{{ orderInfo.remark || '无' }}</text>
        </view>
      </view>

      <!-- 订单详情 -->
      <view class="detail-card">
        <view class="detail-title">订单详情</view>
        
        <view class="detail-item">
          <text class="item-name">{{ orderInfo.serviceItem }}</text>
          <text class="item-price">￥{{ orderInfo.itemPrice }}</text>
        </view>
        
        <view class="detail-item">
          <text class="item-name">车辆附加费用</text>
          <text class="item-price">{{ orderInfo.extraFee }}</text>
        </view>
        
        <view class="divider"></view>
        
        <view class="price-item">
          <text class="price-label">原价</text>
          <text class="price-value">￥{{ orderInfo.originalPrice }}</text>
        </view>
        
        <view class="price-item">
          <text class="price-label">店家优惠</text>
          <text class="price-value discount">-￥{{ orderInfo.shopDiscount }}</text>
        </view>
        
        <view class="price-item">
          <text class="price-label">优惠券</text>
          <text class="price-value discount">-￥{{ orderInfo.couponDiscount }}</text>
        </view>
        
        <view class="price-item total">
          <text class="price-label">支付金额</text>
          <text class="price-value total-amount">￥{{ orderInfo.paymentAmount }}</text>
        </view>
      </view>

      <!-- 联系客服 -->
      <view class="service-card">
        <view class="service-item" @click="contactService">
          <text class="service-text">联系客服</text>
          <text class="arrow">></text>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <button class="btn refund-btn" @click="applyRefund">申请退款</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const orderInfo = ref({});
const verificationCode = ref('');

onLoad((options) => {
  // 模拟根据订单号获取订单详情
  orderInfo.value = {
    orderNo: options.orderNo || '121212112487878',
    service: '车辆保养',
    shop: '大宝车辆维修店',
    orderTime: '2023-03-08 17:40',
    appointmentTime: '2023-03-09 17:40',
    carInfo: '奔驰FWE4/豫A98FHJ',
    remark: '',
    serviceItem: '车辆清洗',
    itemPrice: '39.90',
    extraFee: '0',
    originalPrice: '59.90',
    shopDiscount: '20',
    couponDiscount: '10',
    paymentAmount: '29.9'
  };
  
  // 生成核销码
  verificationCode.value = 'WE343235V';
});

const goBack = () => {
  uni.navigateBack();
};

const contactService = () => {
  uni.showToast({ title: '联系客服', icon: 'none' });
};

const applyRefund = () => {
  uni.showModal({
    title: '提示',
    content: '确定要申请退款吗？',
    success: (res) => {
      if (res.confirm) {
        uni.showToast({ title: '退款申请已提交', icon: 'success' });
      }
    }
  });
};
</script>

<style scoped lang="scss">
.order-detail-page {
  background-color: #f8f8f8;
  min-height: 100vh;
  padding-bottom: 100rpx;

  .nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 30rpx;
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
    
    .nav-left {
      .back-icon {
        font-size: 40rpx;
        color: #333;
      }
    }
    
    .nav-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
    
    .nav-right {
      width: 40rpx;
    }
  }

  .content {
    padding: 20rpx;
  }

  .verification-card {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 40rpx 30rpx;
    margin-bottom: 20rpx;
    text-align: center;
    
    .verification-title {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 20rpx;
    }
    
    .verification-code {
      font-size: 64rpx;
      font-weight: bold;
      color: #007AFF;
      margin-bottom: 20rpx;
      letter-spacing: 8rpx;
    }
    
    .verification-tip {
      font-size: 24rpx;
      color: #999;
    }
  }

  .info-card, .detail-card, .service-card {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
  }

  .info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    padding-bottom: 20rpx;
    border-bottom: 1px solid #f0f0f0;
    
    .status-text {
      font-size: 32rpx;
      font-weight: bold;
      color: #007AFF;
    }
    
    .order-no {
      font-size: 24rpx;
      color: #999;
    }
  }

  .info-item {
    display: flex;
    margin-bottom: 20rpx;
    
    .label {
      font-size: 28rpx;
      color: #666;
      width: 160rpx;
    }
    
    .value {
      font-size: 28rpx;
      color: #333;
      flex: 1;
    }
  }

  .detail-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
  }

  .detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .item-name {
      font-size: 28rpx;
      color: #333;
    }
    
    .item-price {
      font-size: 28rpx;
      color: #333;
    }
  }

  .divider {
    height: 1rpx;
    background-color: #f0f0f0;
    margin: 30rpx 0;
  }

  .price-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .price-label {
      font-size: 28rpx;
      color: #666;
    }
    
    .price-value {
      font-size: 28rpx;
      color: #333;
      
      &.discount {
        color: #FF6B6B;
      }
    }
    
    &.total {
      margin-top: 30rpx;
      padding-top: 20rpx;
      border-top: 1rpx solid #f0f0f0;
      
      .total-amount {
        font-size: 36rpx;
        font-weight: bold;
        color: #FF6B6B;
      }
    }
  }

  .service-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    
    .service-text {
      font-size: 28rpx;
      color: #333;
    }
    
    .arrow {
      font-size: 32rpx;
      color: #999;
    }
  }

  .bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    padding: 20rpx 30rpx;
    display: flex;
    justify-content: flex-end;
    border-top: 1rpx solid #f0f0f0;
    
    .btn {
      padding: 20rpx 40rpx;
      border-radius: 50rpx;
      font-size: 28rpx;
      
      &.refund-btn {
        background-color: #f8f8f8;
        color: #666;
        border: 1rpx solid #ddd;
      }
    }
  }
}
</style>